<template>
	<el-dialog title="选择试题" :visible.sync="dialogVisible" :close-on-click-modal="false" width="1000px" @closed="resetForm()">
		<div class="question-select">
			<div class="question-type">
				<ul @click="handleTypeChange">
					<li :class="{ active: listQuery.subjectsPermission == 1 }" data-type="1">我的试题</li>
					<li :class="{ active: listQuery.subjectsPermission == 2 }" data-type="2">共享试题</li>
				</ul>
			</div>
			<div class="question-search">
				<el-row :gutter="16" type="flex">
					<el-col>
						<QuestionBankTitleSelect v-if="dialogVisible" placeholder="选择题库" size="mini" @emit="setBankId" />
					</el-col>
					<el-col>
						<el-input v-model="listQuery.title" placeholder="请输入题干关键词" @input="getList" size="small" clearable></el-input>
					</el-col>
					<el-col>
						<el-input v-model="listQuery.tags" placeholder="请输入标签关键词" @input="getList" size="small" clearable></el-input>
					</el-col>
					<el-col>
						<QuestionTypeSelect v-if="dialogVisible" size="mini" placeholder="选择题型" @emit="setType" />
					</el-col>
					<el-col>
						<QuestionDifficultySelect v-if="dialogVisible" placeholder="选择难度" size="mini" @emit="setDifficulty" />
					</el-col>
				</el-row>
			</div>
			<div class="question-wrap">
				<el-table
					ref="multipleTable"
					:data="tableData"
					stripe
					row-key="id"
					size="mini"
					style="width: 100%"
					max-height="460"
					@select="handleSelect"
					@selection-change="handleSelectChange"
				>
					<el-table-column type="selection" reserve-selection width="55"></el-table-column>
					<el-table-column prop="name" label="题库名称" width="120" show-overflow-tooltip>
						<template slot-scope="{ row }">
							<span>{{ row.testQuestionBank.name }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="title" label="题干" show-overflow-tooltip>
						<template slot-scope="{ row }">
							<span v-html="row.title"></span>
						</template>
					</el-table-column>
					<el-table-column prop="tags" width="100" label="标签" show-overflow-tooltip></el-table-column>
					<el-table-column prop="type" label="类型" width="80">
						<template slot-scope="{ row }">
							<span>{{ typeFilter(row.type) }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="difficulty" label="难度" width="80">
						<template slot-scope="{ row }">
							<span>{{ difficultyFilter(row.difficulty) }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
					<el-table-column label="操作" width="80">
						<template slot-scope="{ row }">
							<el-button-group>
								<el-button type="success" size="mini" @click="handleLook(row)">查看</el-button>
							</el-button-group>
						</template>
					</el-table-column>
					<div slot="empty" class="emptyBg">
						<el-empty :image-size="200"></el-empty>
					</div>
				</el-table>
				<Pagination v-show="parseInt(pageObj.count) > 0" :total="parseInt(pageObj.count)" @change="getList" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button type="custom" v-preventReClick :disabled="multipleSelection.length == 0" @click="submitForm('form')">提 交</el-button>
			<el-button @click="dialogVisible = false">取 消</el-button>
		</span>
	</el-dialog>
</template>
<script>
import { qusetionType, qusetionDifficulty } from './data';
export default {
	components: {
		QuestionTypeSelect: () => import('./QuestionTypeSelect.vue'),
		QuestionDifficultySelect: () => import('./QuestionDifficultySelect.vue'),
		QuestionBankTitleSelect: () => import('./QuestionBankTitleSelect.vue')
	},
	data() {
		return {
			dialogVisible: false,
			qusetionType,
			qusetionDifficulty,
			listQuery: {
				title: '',
				status: 1,
				bankId: '',
				type: '',
				difficulty: '',
				subjectsPermission: '1',
				page: 1,
				limit: 10
			},
			tableData: [],
			pageObj: {},
			multipleSelection: [],
			questionSelect: []
		};
	},
	props: ['defaultValue'],
	watch: {
		defaultValue: {
			immediate: true,
			handler(v) {
				this.questionSelect = v;
			}
		}
	},
	mounted() {
		this.$bus.$on('showDialogQuestionSelect', () => {
			this.listQuery = this.$options.data().listQuery;
			this.getList();
		});
	},
	beforeDestroy() {
		this.$bus.$off('showDialogQuestionSelect');
	},
	methods: {
		async getList() {
			let res = await this.$store.dispatch('testSubjectsList', this.listQuery);
			this.tableData = res.data;
			this.pageObj = res;
			this.handleSelected();
			this.dialogVisible = true;
		},
		typeFilter(type) {
			return this.qusetionType.filter((v) => v.value == type)[0].label;
		},
		difficultyFilter(type) {
			return this.qusetionDifficulty.filter((v) => v.value == type)[0].label;
		},
		handleLook(row) {
			this.$bus.$emit('showDialogQuestionPreview', row);
		},
		submitForm() {
			this.$emit('emit', this.multipleSelection);
			this.dialogVisible = false;
		},
		handleSelect(selection, row) {
			//取消勾选时对于已选的章节试题同时取消
			let flag = selection.filter((v) => v.id == row.id).length == 0;
			if (flag) {
				this.$emit('notCheckedQuestion', row);
			}
		},
		handleSelectChange(v) {
			this.multipleSelection = v;
		},
		handleTypeChange(e) {
			let type = e.target.getAttribute('data-type');
			this.listQuery.subjectsPermission = type;
			this.getList();
		},
		//数据回显
		handleSelected() {
			let checkedArr = this.myFilter(this.tableData, this.questionSelect);
			if (checkedArr.length) {
				this.$nextTick(() => {
					checkedArr.forEach((row) => {
						this.$refs.multipleTable.toggleRowSelection(row, true);
					});
				});
			}
		},
		resetForm() {
			this.$refs.multipleTable.clearSelection();
		},
		setType(v) {
			this.listQuery.type = v;
			this.getList();
		},
		setDifficulty(v) {
			this.listQuery.difficulty = v;
			this.getList();
		},
		setBankId(v) {
			this.listQuery.bankId = v;
			this.getList();
		},
		//过滤数组相同元素
		myFilter(arr1, arr2) {
			return arr1.filter((ele) => arr2.filter((x) => x == ele.id).length > 0);
		}
	}
};
</script>
<style scoped lang="scss">
.question-select {
	padding: 5px;
	border: 1px solid #eee;
	.question-type {
		height: 42px;
		border: 1px solid #eee;
		ul {
			li {
				float: left;
				width: 50%;
				height: 42px;
				line-height: 42px;
				text-align: center;
				cursor: pointer;
				&.active {
					color: #333;
					background: #eee;
				}
			}
		}
	}
	.question-search {
		margin: 10px 0;
	}
	.question-wrap {
		min-height: 400px;
	}
}
</style>
